<template>
  <div class="home">
    <div class="breadcrumb">
      <el-icon>
        <Location />
      </el-icon>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-carousel :interval="4000" type="card" height="300px" indicator-position="outside">
      <el-carousel-item v-for="item in swiperList" :key="item">
        <img :src="'http://127.0.0.1:7001' + item.set_value" />
      </el-carousel-item>
    </el-carousel>
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in corporateList" :key="item.id">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>{{item.set_name}}</span>
            </div>
          </template>
          <div v-html="item.set_text"></div>
        </el-card>
      </el-col>

      <!-- <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>公司架构</span>
            </div>
          </template>
          <div>公司架构</div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>公司战略</span>
            </div>
          </template>
          <div>公司战略</div>
        </el-card>
      </el-col>

      <el-col :span="6">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>高层介绍</span>
            </div>
          </template>
          <div>高层介绍</div>
        </el-card>
      </el-col>-->
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>公司公告</span>
            </div>
          </template>
          <el-table :data="tableData" style="width: 100%" :show-header="false">
            <el-table-column prop="message_title" label="message_title" width="180" />
            <el-table-column prop="message_level" label="message_level" width="180">
              <template #default="scope">
                <el-tag :type="tagType(scope.row)">{{scope.row.message_level}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="message_publish_deparment" label="message_publish_deparment" />
            <el-table-column prop="message_create_time" label="message_create_time" />
          </el-table>
        </el-card>
        <div></div>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>系统消息</span>
            </div>
          </template>
          <el-table :data="tableDataExamine" style="width: 100%" :show-header="false">
            <el-table-column prop="message_title" label="message_title"  />
            <el-table-column prop="message_create_time" label="message_create_time" width="180" />

          </el-table>
        </el-card>
        <div></div>
      </el-col>
    </el-row>
  </div>
</template>


<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";

import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
  House,
  Message,
  Grid,
  Avatar,
  Position,
  ChatLineSquare,
  Notification,
  Notebook,
  Plus
} from "@element-plus/icons-vue";
import { getSwiper, getAllCorporate } from "@/api/user";
import {
  getAnnouncementManagement, //获取公告管理
  getSystemMessages, // 获取系统消息
} from "@/api/message";

const swiperList = ref([]);
const togetSwiper = () => {
  getSwiper().then(res => {
    if (res.data.status != 0) {
      return ElMessage.error(res.data.message);
    }
    swiperList.value = res.data.data;
  });
};
const corporateList = ref([]);
const toAllCorporate = () => {
  getAllCorporate().then(res => {
    if (res.data.status != 0) {
      return ElMessage.error(res.data.message);
    }
    corporateList.value = res.data.data;
    console.log(corporateList.value );
  });
};

const tableData = ref([]);
const tableDataExamine = ref([]);
const togetAnnouncementManagement = () => {
  let data = {
    pageNum: 1,
    pageSize: 5,
  };
  getAnnouncementManagement(data).then(res => {
    if (res.data.status != 0) {
      return ElMessage.error(res.data.message);
    }
    tableData.value = res.data.data.list;
  });
};
const togetSystemMessages = () => {
  let data = {
    pageNum: 1,
    pageSize: 5,
  };
  getSystemMessages(data).then(res => {
    if (res.data.status != 0) {
      return ElMessage.error(res.data.message);
    }
    tableDataExamine.value = res.data.data.list;
  });
};
const tagType = (row) => {
  if(row.message_level == '必要') {
    return 'danger'

  }else  if (row.message_level == '重要'){
    return 'warning'
  } else {
    return ''
  }
}
onMounted(() => {
  togetSwiper();
  toAllCorporate();
  togetAnnouncementManagement();
  togetSystemMessages();
});
</script>

<style scoped lang="scss">
.home {
  height: calc(100vh - 100px);
  .breadcrumb {
    display: flex;
  }
  .itemWrap {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .el-carousel__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}
.box-card {
  height: 300px;
  margin-bottom: 10px;
}
</style>